<template>
	<view class="realname">
		<u-navbar>
			<view slot="left" class="align-center">
				<image @click="$tools.back()" src="@/static/login/back3.png" style="width: 36rpx; height: 36rpx"></image>
			</view>
			<view slot="center">
				<view style="font-weight: 600; font-size: 36rpx; color: #333333">实名认证</view>
			</view>
		</u-navbar>
		<view style="margin-bottom: 50rpx" v-if="current == 0 || current == 1">
			<u-subsection fontSize="20" :list="list" :current="current" @change="(e) => (current = e)"></u-subsection>
		</view>
		<view v-if="current == 0">
			<view style="font-weight: 400; font-size: 28rpx; color: #999999; margin-bottom: 34rpx">请上传你的身份证照片</view>
			<view class="flex-between1" style="margin-bottom: 80rpx">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1" width="660" height="400">
					<image src="../../static/index/sm2.png" mode="widthFix" style="width: 660rpx; height: 400rpx"></image>
				</u-upload>
				<!-- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="1" width="250" height="150">
					<image src="../../static/index/sm1.png" mode="widthFix" style="width: 330rpx; height: 320rpx"></image>
				</u-upload> -->
			</view>
			<view style="margin-bottom: 50rpx">
				<view style="font-weight: 600; font-size: 32rpx; color: #333333">真实姓名</view>
				<input type="text" v-model="name" placeholder="根据身份证照片，自动识别姓名" style="padding: 34rpx 0; border-bottom: 1rpx solid #eeeeee" />
			</view>
			<view style="margin-bottom: 40rpx">
				<view style="font-weight: 600; font-size: 32rpx; color: #333333">身份证号</view>
				<input type="text" v-model="idcard" placeholder="根据身份证照片，自动识别身份证号" style="padding: 34rpx 0; border-bottom: 1rpx solid #eeeeee" />
			</view>
			<view class="align-center" style="margin-bottom: 50rpx">
				<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
					<u-checkbox shape="circle" size="35" name="1"></u-checkbox>
				</u-checkbox-group>
				<view>
					<text style="font-weight: 400; font-size: 24rpx; color: #aaaaaa">我已阅读并同意</text>
					<text style="font-weight: 400; font-size: 24rpx; color: #1365f9">《用户实名协议》</text>
				</view>
			</view>
			<view class="flex-center1">
				<view
					@click="setsm"
					class="flex-center1"
					style="font-weight: 600; font-size: 32rpx; color: #ffffff; width: 640rpx; height: 96rpx; background: #1365f9; border-radius: 16rpx"
				>
					提交
				</view>
			</view>
		</view>
		<view v-if="current == 1">
			<view style="font-weight: 400; font-size: 28rpx; color: #999999; margin-bottom: 34rpx">请上传你的身份证照片</view>

			<view style="margin-bottom: 50rpx">
				<view style="font-weight: 600; font-size: 32rpx; color: #333333">真实姓名</view>
				<input type="text" v-model="name" placeholder="请输入" style="padding: 34rpx 0; border-bottom: 1rpx solid #eeeeee" />
			</view>
			<view style="margin-bottom: 40rpx">
				<view style="font-weight: 600; font-size: 32rpx; color: #333333">身份证号</view>
				<input type="text" v-model="idcard" placeholder="请输入" style="padding: 34rpx 0; border-bottom: 1rpx solid #eeeeee" />
			</view>
			<view class="align-center" style="margin-bottom: 50rpx">
				<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
					<u-checkbox shape="circle" size="35" name="1"></u-checkbox>
				</u-checkbox-group>
				<view>
					<text style="font-weight: 400; font-size: 24rpx; color: #aaaaaa">我已阅读并同意</text>
					<text style="font-weight: 400; font-size: 24rpx; color: #1365f9">《用户实名协议》</text>
				</view>
			</view>
			<view class="flex-center1">
				<view
					@click="setsm"
					class="flex-center1"
					style="font-weight: 600; font-size: 32rpx; color: #ffffff; width: 640rpx; height: 96rpx; background: #1365f9; border-radius: 16rpx"
				>
					提交
				</view>
			</view>
		</view>
		<view v-if="show" style="padding-top: 260rpx">
			<view class="flex-center1" style="margin-bottom: 50rpx">
				<image src="@/static/index/sm.png" style="width: 440rpx; height: 362rpx"></image>
			</view>
			<view style="font-weight: 600; font-size: 32rpx; color: #242424; text-align: center; margin-bottom: 30rpx">恭喜您！实名认证成功</view>
			<view style="font-weight: 300; font-size: 28rpx; color: #666666; text-align: center">下一步报名填表，自动跳转中…</view>
		</view>
	</view>
</template>

<script>
import urls from '@/common/url.js';
export default {
	data() {
		return {
			list: ['带身份证', '没带身份证'],
			// 或者如下，也可以配置keyName参数修改对象键名
			// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
			current: 0,
			fileList: [],
			fileList1: [],
			checkboxValue: [],
			checked: false,
			show: false,
			name: '',
			idcard: ''
		};
	},
	methods: {
		setsm() {
			if (!this.checked) return this.$tools.toast('请阅读并勾选用户实名协议');
			this.$request('front/user/userAuth', {
				name: this.name,
				idcard: this.idcard
			}).then((res) => {
				console.log(res, '实名');
				if (res.code == 0) {
					this.current = 2;
					this.show = true;
					setTimeout(() => {
						this.$tools.back();
					}, 3000);
				} else {
					this.$tools.toast(res.msg);
				}
			});
		},
		checkboxChange(n) {
			if (n.length > 0) {
				this.checked = true;
			} else {
				this.checked = false;
			}
		},
		getsf(url) {
			this.$request('front/user/readIdcard', {
				url
			}).then((res) => {
				console.log(res, '读取');
				if (res.code == 0) {
					this.name = res.obj.name;
					this.idcard = res.obj.idNumber;
				} else {
					this.$tools.toast('图片有误');
				}
			});
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				this.getsf(result);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		// uploadFilePromise(url) {
		// 	return new Promise((resolve, reject) => {
		// 		let a = uni.uploadFile({
		// 			url: `${urls.url}front/search/uploadImage`, // 仅为示例，非真实的接口地址
		// 			filePath: url,
		// 			name: 'file',
		// 			// formData: {
		// 			// 	user: 'test'
		// 			// },
		// 			header: {
		// 				token: uni.getStorageSync('token')
		// 			},
		// 			success: (res) => {
		// 				setTimeout(() => {
		// 					resolve(JSON.parse(res.data).obj);
		// 				}, 1000);
		// 			}
		// 		});
		// 	});
		// },
		uoloadimg() {}
	}
};
</script>

<style lang="less" scoped>
.realname {
	padding: 180rpx 36rpx;
}
</style>
